<template>
    <div ref="chartRef" style="width: 600px; height: 400px"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { MapChart } from "echarts/charts";
import {
    TitleComponent,
    TooltipComponent,
    VisualMapComponent,
} from "echarts/components";
import chinaJSON from "./js/china.json"; // 引入本地的 china.json 文件
import myTheme from "./js/theme"; // 引入自定义主题

// 注册必须的组件和渲染器
echarts.use([
    CanvasRenderer,
    MapChart,
    TitleComponent,
    TooltipComponent,
    VisualMapComponent,
]);
// 注册中国地图数据
echarts.registerMap("china", chinaJSON);
// 注册自定义主题
echarts.registerTheme("myTheme", myTheme);
const chartRef = ref<HTMLElement | null>(null);

onMounted(() => {
    if (chartRef.value) {
        // 基于准备好的dom，初始化echarts实例
        const chart = echarts.init(chartRef.value, "myTheme");
        // 指定图表的配置项和数据
        const option = {
            title: {
                text: "中国地图示例",
                left: "center",
            },
            tooltip: {
                trigger: "item",
                formatter: "{b}<br/>{c}",
            },
            visualMap: {
                min: 0,
                max: 1000,
                left: "left",
                top: "bottom",
                text: ["高", "低"], // 文本，默认为数值文本
                calculable: true,
            },
            series: [
                {
                    name: "随机数据",
                    type: "map",
                    mapType: "china",
                    roam: true,
                    label: {
                        show: true,
                    },
                    data: [
                        {
                            name: "北京",
                            value: Math.round(Math.random() * 1000),
                        },
                        {
                            name: "上海",
                            value: Math.round(Math.random() * 1000),
                        },
                        // ... 可以添加更多省份的数据
                    ],
                },
            ],
        };

        // 使用刚指定的配置项和数据显示图表。
        chart.setOption(option);
    }
});
</script>

<style scoped>
/* 根据需要添加样式 */
</style>
